<!-- 文字配置 -->
<template>
	<div>
		<el-form-item label="文本内容">
			<avue-input type="textarea" :disabled="disabled" v-model="main.activeObj.data.value"></avue-input>
		</el-form-item>
		<el-form-item label="单行省略">
			<avue-switch v-model="main.activeOption.singleOmit" :disabled="disabled"></avue-switch>
		</el-form-item>
		<el-collapse accordion>
			<el-collapse-item title="文本样式">
				<el-form-item label="字体类型">
					<avue-select filterable allow-create :disabled="disabled" v-model="main.activeOption.fontFamily" :dic="dicOption.fontFamily"></avue-select>
				</el-form-item>
				<el-form-item label="字体大小">
					<avue-input-number v-model="main.activeOption.fontSize" :disabled="disabled" :max="200"></avue-input-number>
				</el-form-item>
				<el-form-item label="字体颜色">
					<avue-input-color v-model="main.activeOption.color" :disabled="disabled"></avue-input-color>
				</el-form-item>
				<el-form-item label="字体间距">
					<avue-input-number v-model="main.activeOption.split" :disabled="disabled"></avue-input-number>
				</el-form-item>
				<el-form-item label="字体行高">
					<avue-input-number v-model="main.activeOption.lineHeight" :disabled="disabled"></avue-input-number>
				</el-form-item>
				<el-form-item label="字体背景">
					<avue-input-color v-model="main.activeOption.backgroundColor" :disabled="disabled"></avue-input-color>
				</el-form-item>
				<el-form-item label="文字粗细">
					<avue-select v-model="main.activeOption.fontWeight" :dic="dicOption.fontWeight" :disabled="disabled"> </avue-select>
				</el-form-item>
				<el-form-item label="对齐方式">
					<avue-select v-model="main.activeOption.textAlign" :dic="dicOption.textAlign" :disabled="disabled"> </avue-select>
				</el-form-item>
			</el-collapse-item>
		</el-collapse>

		<el-collapse accordion>
			<el-collapse-item title="跑马灯设置">
				<el-form-item label="开启">
					<avue-switch v-model="main.activeOption.scroll" :disabled="disabled"></avue-switch>
				</el-form-item>
				<template>
					<el-form-item label="滚动速度" v-if="main.activeOption.scroll">
						<avue-input v-model="main.activeOption.speed" :disabled="disabled"></avue-input>
					</el-form-item>
					<el-form-item label="滚动方向" v-if="main.activeOption.scroll">
						<avue-select v-model="main.activeOption.scrollDirection" :dic="dicOption.scrollDirection" :disabled="disabled"> </avue-select>
					</el-form-item>
					<el-form-item label="开启鼠标悬停" v-if="main.activeOption.scroll">
						<avue-switch v-model="main.activeOption.hoverStop" :disabled="disabled"></avue-switch>
					</el-form-item>
				</template>
			</el-collapse-item>
			<el-collapse-item title="超链设置">
				<el-form-item label="开启">
					<avue-switch v-model="main.activeOption.link" :disabled="disabled"></avue-switch>
				</el-form-item>
				<template v-if="main.activeOption.link">
					<el-form-item label="打开方式">
						<avue-radio v-model="main.activeOption.linkTarget" :dic="dicOption.target" :disabled="disabled"> </avue-radio>
					</el-form-item>
					<el-form-item label="超链地址">
						<avue-input v-model="main.activeOption.linkHref" :disabled="disabled"></avue-input>
					</el-form-item>
				</template>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script>
import { dicOption } from '@/option/config';
export default {
	name: 'text',
	data() {
		return {
			dicOption: dicOption,
			disabled: this.contain.activeObj.isLock
		};
	},
	inject: ['main', 'contain']
};
</script>

<style></style>
